<template>
  <div class="app-container">
    <div style="margin-bottom: 16px;">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item v-for="item in pageParent" :key="item.id">
          <el-button type="text" style="padding-bottom: 0px;" @click="goParent">{{ item.name }} </el-button>
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!-- 操作表单 -->
    <div class="op-form">
      <el-form :inline="formInline" class="demo-ruleForm">
        <div>
          <el-form-item label="" label-width="80px">
            <el-input v-model="searchKey" placeholder="姓名" @keyup.enter.native="seachHandler" style="width: 300px;">
              <el-button slot="append" icon="el-icon-search" @click="seachHandler">搜索</el-button>
            </el-input>
          </el-form-item>
        </div>
      </el-form>
    </div>
    <el-table :data="list" v-loading.body="loading" @sort-change="sortHandler" element-loading-text="Loading" border fit highlight-current-row>
      <el-table-column align="center" fixed="left" sortable="true" prop="id" label='ID' width="95">
        <template slot-scope="scope">
          {{scope.row.id}}
        </template>
      </el-table-column>
      <el-table-column label="成员" width="110" align="center">
        <template slot-scope="scope">
          <div><svg-icon icon-class="vip" v-if="scope.row.master == 1" class="vip-icon"/></div>
          <span>
            <el-tooltip placement="top" :content="scope.row.nickname">
              <el-button type="text" @click="showUserGroupFile(scope.row.uid)">
                <img class="avatar-img" :src="scope.row.avatar" >
              </el-button>
            </el-tooltip>
          </span>
        </template>
      </el-table-column>
      <el-table-column align="center" sortable="true" prop="create_time" label="加入时间" width="200">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span>{{scope.row.create_time}}</span>
        </template>
      </el-table-column>
    </el-table>
    <div style="margin-top: 10px; margin-left: -10px;">
      <el-pagination ref="pagination" 
        background 
        :page-size="pageSize"
        :current-page="page" 
        :pager-count="21" 
        @current-change="pageChange" 
        layout="prev, pager, next"
        :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { members } from '@/api/invite'
export default {
  data() {
    return {
      formInline: true,
      list: [],
      loading: true,
      pageSize: 0,
      total: 0,
      executeQuery: false,
      pageParent: [
        {
          id: 0,
          name: '最顶级',
        }
      ],
      uid: undefined,
      page: 1,
      searchKey: '',
      status: '3',
      osc: 'DESC',
      orderKey: 'id'
    }
  },
  watch: {
    executeQuery: function(nv, ov) {
      if (nv) {
        // 如果为true, 则执行查询
        this.fetchData()
      }
    }
  },
  computed: {
    disableBreadcrumbBtn(idx) {
      if (idx == this.pageParent.length - 1) {
        return true
      } else {
        return false
      }
    }
  },
  mounted() {
    // 重置数据, 每次进入页面的时候
    this.uid = this.$route.query.uid
    if (this.uid === undefined) {
      this.uid = 0
    }
    // 初始化其它参数
    this.searchKey = ''
    this.osc = 'DESC'     //  降序
    this.orderKey = 'id'  // 按id排序
    this.page = 1         //  第一页
    this.fetchData()
  },
  methods: {
    fetchData() {
      this.loading = true
      let query = this.buildListQuery()
      members(query).then(res => {
        this.pageSize = res.page_size
        this.total = res.total
        this.loading = false
        this.executeQuery = false
        this.list = res.items
        // 更新分页器的内部当前页
        this.$refs.pagination.internalCurrentPage = this.page
      }).catch( (err) => { 
        this.loading = false
        this.executeQuery = false
      })
    },
    goParent() {
      this.$router.push({path: 'index'})
    },
    sortHandler(sortInfo) {
      this.orderKey= sortInfo.prop
      if (sortInfo.order === "descending") {
        this.osc = "DESC"
      } else {
        this.osc = "ASC"
      }
      this.executeQuery = true
    },
    pageChange(page) {
      this.page = page
      this.executeQuery = true
    },
    // 构建查询结构
    buildListQuery() {
      // 返回数据
      return {
        name: this.searchKey,
        orderKey: this.orderKey,
        osc: this.osc,
        page: this.page,
        uid: this.uid
      }
    },
    seachHandler() {
      this.fetchData()
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  .avatar-img {
    width: 40px;
    height: 40px;
    border: 2px solid #409EFF; 
    border-radius: 5px;
  }
  .el-button--text {
    padding-top: 0px;
    color: #7C796E;
  }
  .op-form {
    background: #F5F9FF;
    border: 1px dashed #CCCCCC;
    border-radius: 5px;
    padding: 10px;
    margin-bottom: 10px;
  }
  .el-form-item {
    margin-bottom: 10px;
  }
  .vip-icon {
    color:orange;
    font-size:16px;
  }
  .group-info {
    font-size: 14px;
  }
</style>

